import React, { Component } from "react";
// ant
import { Modal, message } from "antd";
// API
import { accountAdd, getAccountDetail, updateAccount } from "@/api/account";
// 组件
import FormCom from "@c/form/Index";
// 加密
import { enDES3_pass } from "@/utils/validate";

class UserModal extends Component {
    constructor(props){
        super(props);
        this.state = {
            isModalVisible: false,
            account_id: "",
            formConfig: {
                url: "accountAdd",
                editKey: "",
                initValue: {
                    number: 0,
                    status: "",
                    parentId: ""
                },
                setFieldValue: {},
                formatFormKey: "id"
            },
            formLayout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 20 }
            },
            formItemAdd: [
                { 
                    type: "Input",
                    label: "账号名称", 
                    name: "name", 
                    required: true, 
                    style: { width: "200px" },
                    placeholder: "请输入账号名称"
                },
                { 
                    type: "Input",
                    label: "账号uid", 
                    name: "uid", 
                    required: false, 
                    style: { width: "200px" },
                    placeholder: "请输入账号uid"
                },
                { 
                    type: "SelectComponent",
                    label: "事业部", 
                    url: "departmentListAll",
                    method: "get",
                    name: "department_code",
                    propsKey: {
                        label: "name",
                        value: "code"
                    },
                    // required: true,
                    style: { width: "200px" },
                    placeholder: "请选择"
                },
                { 
                    type: "Select",
                    label: "所属平台", 
                    name: "platform",
                    required: true,
                    style: { width: "200px" },
                    options : [ 
                        { label: "阿里云", value: "阿里云" },
                        { label: "聚石塔", value: "聚石塔" },
                        { label: "淘宝开放平台", value: "淘宝开放平台" },
                        { label: "腾讯云", value: "腾讯云" },
                        { label: "京东云鼎", value: "京东云鼎" },
                        { label: "京东商家开放平台", value: "京东商家开放平台" },
                        { label: "拼多多", value: "拼多多" },
                    ],
                    placeholder: "请选择平台"
                },
                { 
                    type: "Select",
                    label: "用途tag", 
                    name: "tag",
                    mode: "multiple",
                    required: true,
                    style: { width: "200px" },
                    options : [ 
                        { label: "其他", value: "other" },
                        { label: "云安全", value: "sas" },
                        { label: "域名管理", value: "dns" },
                        { label: "资源管理", value: "ecs" },
                        { label: "云监控", value: "cms" },
                        { label: "数据库管理", value: "rds" },
                        { label: "单事业部使用", value: "solo" },
                    ],
                    placeholder: "请选择tag"
                },
                { 
                    type: "Input",
                    label: "AK/账号", 
                    name: "access_key_id", 
                    required: true,
                    style: { width: "200px" },
                    placeholder: "请输入AccessKeyID",
                },
                { 
                    type: "Input",
                    value_type: "password",
                    label: "SK/密码", 
                    name: "access_key_secret",
                    required: true,
                    trigger: ['onBlur'],
                    style: { width: "200px" },
                    placeholder: "请输入密码",
                }
            ],
            formItemEdit: [
                { 
                    type: "Input",
                    label: "账号名称", 
                    name: "name", 
                    required: true, 
                    style: { width: "200px" },
                    placeholder: "请输入账号名称"
                },
                { 
                    type: "Input",
                    label: "账号uid", 
                    name: "uid", 
                    required: false, 
                    style: { width: "200px" },
                    placeholder: "请输入账号uid"
                },
                { 
                    type: "SelectComponent",
                    label: "事业部", 
                    url: "departmentListAll",
                    method: "get",
                    name: "department_code",
                    propsKey: {
                        label: "name",
                        value: "code"
                    },
                    // required: true,
                    style: { width: "200px" },
                    placeholder: "请选择"
                },
                { 
                    type: "Select",
                    label: "所属平台", 
                    name: "platform",
                    required: true,
                    style: { width: "200px" },
                    options : [ 
                        { label: "阿里云", value: "阿里云" },
                        { label: "聚石塔", value: "聚石塔" },
                        { label: "淘宝开放平台", value: "淘宝开放平台" },
                        { label: "腾讯云", value: "腾讯云" },
                        { label: "京东云鼎", value: "京东云鼎" },
                        { label: "京东商家开放平台", value: "京东商家开放平台" },
                        { label: "拼多多", value: "拼多多" },
                    ],
                    placeholder: "请选择平台"
                },
                { 
                    type: "Select",
                    label: "用途tag", 
                    name: "tag",
                    mode: "multiple",
                    required: true,
                    style: { width: "200px" },
                    options : [ 
                        { label: "其他", value: "other" },
                        { label: "云安全", value: "sas" },
                        { label: "域名管理", value: "dns" },
                        { label: "资源管理", value: "ecs" },
                        { label: "云监控", value: "cms" },
                        { label: "数据库管理", value: "rds" },
                        { label: "单事业部使用", value: "solo" },
                    ],
                    placeholder: "请选择tag"
                },
                { 
                    type: "Input",
                    label: "AK", 
                    name: "access_key_id", 
                    required: true,
                    style: { width: "200px" },
                    placeholder: "请输入AccessKeyID",
                }
            ]
        };
    }

    componentDidMount(){
        this.props.onRef(this);
    }

    onFormRef = (ref) => {
        this.child = ref;
    }

    // 关闭弹窗
    handleCancel = () => {
        // 清单表单
        this.child.onReset();
        this.setState({
            isModalVisible: false,  // 关闭弹窗
            formConfig: { setFieldValue: "" },  // 清除form的初始数据
        })
    }
    
    /** 弹窗 */
    visibleModal = (params) => {
        this.setState({
            isModalVisible: params.status,
            account_id: params.account_id
        }, () => {
            this.getDetailed()
        })
    }

    /** account详情 */
    getDetailed = () => {
        if(!this.state.account_id) { return false; }
        getAccountDetail({id: this.state.account_id}).then(response => {
            const data = response.data.data.items[0];
            console.log(data)
            this.setState({
                formConfig: {
                    setFieldValue: data
                }
            })
        })
    }

    onBlurEvent = (e) => {
        const value = e.currentTarget.value;
        if(value) {
            this.updateItem(value ? false : true);
            return false;
        }
    }
    // 提交按钮
    submit = (value) => {
        this.state.account_id ? this.handlerFormEdit(value) : this.handlerFormAdd(value);
        
    }
    // 添加 提交表单
    handlerFormAdd= (value) => {
        const requestData = value;
        requestData.access_key_secret = enDES3_pass(value.access_key_secret);
        console.log(requestData)
        accountAdd(requestData).then(response => {
            const responseData = response.data;
            // 提示
            message.info(responseData.msg);
            // 关闭弹准备
            this.handleCancel(false);
        })
    }
    // 编辑 提交表单
    handlerFormEdit= (value) => {
        console.log(value)
        const requestData = value;
        // requestData.access_key_secret = enDES3_pass(value.access_key_secret);
        const id = this.state.account_id;
        updateAccount(id, requestData).then(response => {
            const responseData = response.data;
            // 提示
            message.info(responseData.msg);
            // 关闭弹准备
            this.handleCancel(false);
        })
    }

    render(){
        console.log(this.props)
        return (
            <Modal title="云平台账号信息" visible={this.state.isModalVisible} footer={null} onCancel={this.handleCancel}>
                <FormCom 
                    onRef={this.onFormRef} 
                    onBlur={this.onBlurEvent} 
                    formItem={this.state.account_id ? this.state.formItemEdit : this.state.formItemAdd} 
                    formLayout={this.state.formLayout} 
                    formConfig={this.state.formConfig} 
                    submit={this.submit}
                >
                </FormCom>
            </Modal>
        )
    }
}

export default UserModal;